<!DOCTYPE html>
<html>
      <head>
			<meta charset="utf-8">
	        <title>表单验证</title>
			<script src="../lib/jquery.js"></script>
			<script src="../dist/jquery.validate.js"></script>
			<style>
			form{
			width:45%;
			margin-left: auto;
			margin-right: auto;}
			.error{
			 color:red!important;
			}
			</style>
	  </head>
	  <body>
	       <form class="cmxform" id="commentForm" method="get" action="">
				<fieldset>
					<legend>请提供您的姓名，电子邮件地址（不发表）和评论</legend>
					<p>
						<label for="cname" style="margin-left:32px">名称 </label>
						<input id="cname" name="name" minlength="2" type="text" required>
					</p>
					<p>
						<label for="cemail">邮件地址 </label>
						<input id="cemail" type="email" name="email" required>
					</p>
					<p>
						<label for="curl" style="margin-left:32px">网址 </label>
						<input id="curl" type="url" name="url">
					</p>
					<p>
						<label for="ccomment">你的评论 </label>
						<textarea id="ccomment" name="comment" required></textarea>
					</p>
					<p>
						<input class="submit" type="submit" value="提交" style="margin-left:20%">
					</p>
				</fieldset>
			</form>
<form class="cmxform" id="signupForm" method="get" action="">
    <fieldset>
        <legend>完整验证表单</legend>
        <p>
            <label for="firstname" style="margin-left:32px">名称</label>
            <input id="firstname" name="firstname" type="text">
        </p>
        <p>
            <label for="lastname" style="margin-left:32px">姓氏</label>
            <input id="lastname" name="lastname" type="text">
        </p>
        <p>
            <label for="username" style="margin-left:16px">用户名</label>
            <input id="username" name="username" type="text">
        </p>
        <p>
            <label for="password" style="margin-left:32px">密码</label>
            <input id="password" name="password" type="password">
        </p>
        <p>
            <label for="confirm_password">重复密码</label>
            <input id="confirm_password" name="confirm_password" type="password">
        </p>
        <p>
            <label for="email">邮件地址</label>
            <input id="email" name="email" type="email">
        </p>
        <p>
            <label for="agree">请同意我们的协议</label>
            <input type="checkbox" class="checkbox" id="agree" name="agree">
        </p>
        <p>
            <label for="newsletter">我想收到时事通讯。</label>
            <input type="checkbox" class="checkbox" id="newsletter" name="newsletter">
        </p>
        <fieldset id="newsletter_topics">
            <legend>请选择两项</legend>
            <label for="topic_marketflash">
                <input type="checkbox" id="topic_marketflash" value="marketflash" name="topic">选项1
            </label>
            <label for="topic_fuzz">
                <input type="checkbox" id="topic_fuzz" value="fuzz" name="topic">选项2
            </label>
            <label for="topic_digester">
                <input type="checkbox" id="topic_digester" value="digester" name="topic">选项3
            </label>
			<br>
            <label for="topic" class="error">请选择至少两个您想接收的主题。</label>
        </fieldset>
        <p>
            <input class="submit" type="submit" value="提交" style="margin-left:20%">
        </p>
    </fieldset>
</form>
      <script>
			$().ready(function() {
			$("#commentForm").validate();
			});
			$().ready(function() {
    // validate signup form on keyup and submit
    $("#signupForm").validate({
        rules: {
            firstname: "required",
            lastname: "required",
            username: {
                required: true,
                minlength: 2
            },
            password: {
                required: true,
                minlength: 5
            },
            confirm_password: {
                required: true,
                minlength: 5,
                equalTo: "#password"  //两次密码比较
            },
            email: {
                required: true,
                email: true
            },
            topic: {
                required: "#newsletter:checked",
                minlength: 2
            },
            agree: "required"
        },
        messages: {  // 消息可以自定义
            firstname: "请输入您的名字",
            lastname: "请输入您的姓氏",
            username: {
                required: "请输入用户名",
                minlength: "用户名必须由至少2个字符组成"
            },
            password: {
                required: "请输入密码",
                minlength: "您的密码必须至少有5个字符长。"
            },
            confirm_password: {
                required: "请输入密码",
                minlength: "您的密码必须至少有5个字符长。",
                equalTo: "请再次输入密码"
            },
            email: "请输入有效的电子邮件地址",
            agree: "请接受我们的政策",
            topic: "请选择至少2个主题"
        }
    });
});
	  </script>
	  </body>
</html>